<template>
    <div class="zhuye">
    	<header>
    		<span class="left"></span>
    		<span class="center">泡茶趣</span>
    		<router-link to='/my'><span class="right"><img src="../../static/img/logo.png"/></span></router-link>
    	</header>
    	
    	
    	<section>
    		<div class="banner">
            <div class="swiper-container imgs">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">
                        <router-link to='/chaqutwo'><img src="../../static/img/chaqubnner.png" style="width:100%;height:100%" /></router-link>
                    </div>
                    <div class="swiper-slide">
                        <router-link to='/chaqutwo'><img src="../../static/img/chaqubnner.png" style="width:100%;height:100%" /></router-link>
                    </div>
                    <div class="swiper-slide">
                       <router-link to='/chaqutwo'><img src="../../static/img/chaqubnner.png" style="width:100%;height:100%" /></router-link>
                    </div>
                </div>
                <div class="swiper-pagination"></div>
                <div class="swiper-scrollbar"></div>
                </div>
            </div>
    	</section>
    	
    	<section class="jiesao">
    		<div>
	    		<dl v-for='item in imges'>
	    			<router-link to='/chaquone' tag='dt'><img :src="item.img"/></router-link>
	    			<dd>
	    				<h2>{{item.title}}</h2>
	    				<p>{{item.describe}}</p>
	    				<p>{{item.data}}</p>
	    			</dd>
	    		</dl>
    		</div>
    		
    	</section>	
 </div>	
</template>
		
<script>
import axios from 'axios'
export default {
  name:'chaQu',
  data () {
  	return {
		imges:[]
		
     }
  },
  mounted () {
  var myswiper = new Swiper('.swiper-container', {
              autoplay: 1000,
              pagination: '.swiper-pagination'       
        });
    axios.get('../../static/json/chaQu.json')
	   .then(response => {
		this.imges = response.data
		console.log(this.imges)
	}) 
          
 }
}
</script>

<style scoped lang="less">
	@import '.././assets/less/header.less';
	@import '.././assets/css/swiper.min.css';
	@import '.././assets/less/chaQu.less';
	
.active{
    background: #42B983;
    color: white!important;
    padding: 13px 40px;
}
</style>
    	
   
    
